<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">M B T I 综合管理系统</div>
      <el-form :model="param" :rules="loginRules" class="ms-content">
        <el-form-item prop="Username">
          <el-input
            clearable
            prefix-icon="user"
            placeholder="username"
            v-model="param.Username"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="Password">
          <el-input
            clearable
            prefix-icon="lock"
            type="password"
            placeholder="password"
            show-password
            v-model="param.Password"
            @keyup.enter="submitForm()"
          >
          </el-input>
        </el-form-item>

        <el-row :gutter="15" type="flex" justify="center">
          <el-form-item class="btns">
            <el-button type="primary" @click="submitForm()">登录</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      param: {
        Username: "admin",
        Password: "admin",
      },
      loginRules: {
        Username: [
          {
            required: true,
            message: "请输入用户ID",
            trigger: "blur",
          },
        ],
        Password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    async submitForm() {
      if (this.param.Password === "" || this.param.Username === "") {
        this.$message.error("请输入 ID 和 密码");
        return false;
      }
      console.log(this.param);
      const { data: res } = await this.$http.post("api/login", this.param);
      if (res.Code === 200 && this.param.Username.length === 10) {
        this.$message.success("登录成功");
        window.sessionStorage.setItem("No", res.Data["No"]);
        window.sessionStorage.setItem("Name", res.Data["Name"]);
        window.sessionStorage.setItem("Token", res.Data["Token"]);
        this.$router.push("/stuMain");
      } else if (res.Code === 200 && this.param.Username.length !== 10) {
        this.$message.success("登录成功");
        window.sessionStorage.setItem("No", res.Data["No"]);
        window.sessionStorage.setItem("Name", res.Data["Name"]);
        window.sessionStorage.setItem("Token", res.Data["Token"]);
        this.$router.push("/adMain");
      } else {
        this.$message.error("用户名或密码错误");
      }
    },
    resetForm() {
      this.param.Username = "";
      this.param.Password = "";
    },
  },
};
</script>

<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../assets/bg-login.png);
  background-size: 100%;
}

.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}

.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.ms-content {
  padding: 30px 30px;
}

.el-radio {
  color: rgb(0, 0, 0);
}
</style>
